<template>
    <a-drawer
        :title="title"
        :visible="true"
        :width="width"
        :confirm-loading="loading"
        @ok="submitVisible"
        @close="cancelVisible"
        :maskClosable="false"
    >
        <a-spin :spinning="loading" tip="Loading...">
            <slot />
        </a-spin>
        <div
            v-if="footer"
            :style="{
                position: 'absolute',
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e8e8e8',
                padding: '10px 16px',
                textAlign: 'right',
                left: 0,
                background: '#fff',
                borderRadius: '0 0 4px 4px',
                zIndex:9
            }"
        >
            <a-button v-if="isCancel" style="marginRight: 8px" @click="cancelVisible">
                取 消
            </a-button>
            <a-button type="primary" v-if="isSure" :loading="loading" @click="submitVisible">
                确 定
            </a-button> 
        </div>
        <div class="footer" v-if="footer"></div>
            <!-- <span v-if="footer" slot="footer" class="dialog-footer">
        <slot name="footer">
            <a-button @click="cancelVisible">取 消</a-button>
            <a-button type="primary" :loading="loading" @click="submitVisible">确 定</a-button>
        </slot>
        </span>
        <slot /> -->
        
    </a-drawer>
</template>

<script>
export default {
    name: 'ShowModal',
    props: {
        title: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: '500px'
        },
        loading: {
            type: Boolean,
            default: false
        },
        footer: {
            type: Boolean,
            default: true
        },
        isSure:{
            type: Boolean,
            default: true
        },
        isCancel:{
            type: Boolean,
            default: true
        }
    },
    methods: {
        cancelVisible() {
            if (this.loading) return false;
            this.$emit('cancel');
        },
        submitVisible() {
            this.$emit('submit');
        }
    }
};
</script>
<style lang="scss" scoped>
// .footer {
//     position: 'absolute';
//     bottom: 0;
//     width: '100%';
//     border-top: '1px solid #e8e8e8';
//     padding: '10px 16px';
//     text-align: 'right';
//     left: 0;
//     background: '#fff';
//     border-radius: '0 0 4px 4px';
// }
::v-deep .ant-drawer-body{
    padding-bottom: 44px;
}
.footer{
    height: 28px;
}
</style>
